<template>
	<view>
		<u-popup v-model="value" :popup="false" mode="bottom" @close="hide">
			<!-- #ifndef MP-WEIXIN -->
			<u-grid :col="3" :border="false">
				<u-grid-item v-for="(item, index) in list" :key="index" @click="share(index, item)">
					<u-icon :name="item.icon" :color="item.color" :size="item.size"></u-icon>
					<view class="grid-text u-m-t-10" v-text="item.name"></view>
				</u-grid-item>
			</u-grid>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<u-grid :col="3" :border="false">
				<u-grid-item v-for="(item, index) in list" :key="index" @click="share(index, item)">
					<button class="u-text-center share-btn" :open-type="index==1?'share':''">
						<u-icon :name="item.icon" :color="item.color" :size="item.size"></u-icon>
						<view class="grid-text u-m-t-10" v-text="item.name"></view>
					</button>
				</u-grid-item>
			</u-grid>			
			<!-- #endif -->
			<u-gap height="3" bg-color="rgb(244, 246, 248)"></u-gap>
			<view class="u-text-center u-p-30" @click="hide">取消</view>
		</u-popup>		
	</view>
</template>

<script>
export default {
	name: 'fa-app-share',
	props: {
		value: {
			type: Boolean,
			default: false
		},
		goodsId:{
			type:[Number,String],
			default:''
		},
		title: {
			type: String,
			default: ''
		},
		summary: {
			type: String,
			default: ''
		},
		href: {
			type: String,
			default: ''
		},
		imageUrl: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			// #ifdef H5
			list: [
				{
					name: '生成海报',
					icon: 'photo',
					size: 60,
					color: '#2979ff',
					type: 0, //图文
					provider: 'weixin'
				},
				{
					name: '复制链接',
					icon: 'attach',
					size: 60,
					color: '#44b549',
					type: 0, //图文
					provider: 'weixin'
				}
			],
			// #endif
			// #ifdef MP-WEIXIN
			list: [
				{
					name: '生成海报',
					icon: 'photo',
					size: 60,
					color: '#2979ff',
					type: 0, //图文
					provider: 'weixin'
				},
				{
					name: '分享好友',
					icon: 'weixin-circle-fill',
					size: 60,
					color: '#44b549',
					type: 0, //图文
					provider: 'weixin'
				}
			],
			// #endif
			// #ifdef APP-PLUS
			list: [
				{
					name: '微信好友',
					icon: 'weixin-circle-fill',
					size: 60,
					color: '#44b549',
					type: 0, //图文
					provider: 'weixin'
				},
				{
					name: '微信朋友圈',
					icon: 'moments-circel-fill',
					size: 60,
					color: '#44b549',
					type: 0, //图文
					provider: 'weixin'
				},
				{
					name: '微信收藏',
					icon: 'star-fill',
					size: 60,
					color: '#ff9100',
					type: 0, //图文
					provider: 'weixin'
				},
				{
					name: 'QQ好友',
					icon: 'qq-circle-fill',
					size: 60,
					color: '#388BFF',
					type: 2, //图
					provider: 'qq'
				},
				{
					name: '新浪微博',
					icon: 'weibo-circle-fill',
					size: 60,
					color: '#BE3E3F',
					type: 0, //图文
					provider: 'sinaweibo	'
				}
			]
			// #endif
		};
	},
	methods: {
		hide() {
			this.$emit('input', false);
		},
		// #ifdef H5
		share(index,item) {
			if(!index){
				this.$emit('shares')
				return;
			}
			this.$util.uniCopy({
				content: window.location.href,
				success: () => {
					this.$u.toast('复制成功，请去粘贴发送给好友吧');
					this.hide()
				},
				error: () => {
					console.error('复制失败！');
				}
			});
		},
		// #endif
		// #ifdef MP-WEIXIN
		share(index,item) {
			if(!index){
				this.$emit('shares')
				return;
			}			
		},
		// #endif
		// #ifdef APP-PLUS
		share(index, item) {
			let data = {
				provider: item.provider,
				type: item.type,
				href: this.href,
				title: this.title,
				summary: this.summary,
				imageUrl: this.imageUrl,
				success: res => {
					this.hide();
					this.$u.toast('分享成功！');
				},
				fail: err => {
					console.log(JSON.stringify(err));
					this.$u.toast('分享失败！');
				}
			};
			if (index == 0) {
				data.scene = 'WXSceneSession';
			}
			if (index == 1) {
				data.scene = 'WXSenceTimeline';
			}
			if (index == 2) {
				data.scene = 'WXSceneFavorite';
			}
			console.log(JSON.stringify(data));
			uni.share(data);
		}
		// #endif
	}
};
</script>

<style lang="scss" scoped>

</style>
